import 'package:flutter/material.dart';
import 'package:flutter_question_app/controllers/question_controller.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/state_manager.dart';
import 'package:get/get.dart';

import '../../../constants.dart';

// class ProgressBar extends StatefulWidget {
//   const ProgressBar({Key key}) : super(key: key);

//   @override
//   _ProgressBarState createState() => _ProgressBarState();
// }

// class _ProgressBarState extends State<ProgressBar> {

// 注入
// QuestionController _questionController = Get.put(QuestionController());

class ProgressBar extends StatelessWidget {
  const ProgressBar({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 35,
      decoration: BoxDecoration(
        border: Border.all(
          width: 3,
          color: Color(0xFF3F4768),
        ),
        borderRadius: BorderRadius.circular(50),
      ),
      child: GetBuilder(
        init: QuestionController(),
        builder: (QuestionController controller) {
          return Stack(
            children: [
              // LayoutBuilder provide us the available space for the conatiner
              // constraints.maxWidth needed for our animation
              LayoutBuilder(
                builder: (context, constraints) => Container(
                  width: constraints.maxWidth * controller.animation.value,
                  decoration: BoxDecoration(
                    gradient: kPrimaryGradient,
                    borderRadius: BorderRadius.circular(50),
                  ),
                ),
              ),
              Positioned.fill(
                child: Padding(
                  padding:
                      EdgeInsets.symmetric(horizontal: kDefaultPadding / 2),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("${(controller.animation.value * 60).round()} sec"),
                      SvgPicture.asset("assets/icons/clock.svg"),
                    ],
                  ),
                ),
              ),
            ],
          );
        },
      ),
      // 另一种实现的方法
      // child: GetBuilder(
      //   builder: (QuestionController controller) {
      //     return Stack(
      //       children: [
      //         // LayoutBuilder provide us the available space for the conatiner
      //         // constraints.maxWidth needed for our animation
      //         LayoutBuilder(
      //           builder: (context, constraints) => Container(
      //             width: constraints.maxWidth * controller.animation.value,
      //             decoration: BoxDecoration(
      //               gradient: kPrimaryGradient,
      //               borderRadius: BorderRadius.circular(50),
      //             ),
      //           ),
      //         ),
      //         Positioned.fill(
      //           child: Padding(
      //             padding:
      //                 EdgeInsets.symmetric(horizontal: kDefaultPadding / 2),
      //             child: Row(
      //               mainAxisAlignment: MainAxisAlignment.spaceBetween,
      //               children: [
      //                 Text("${(controller.animation.value * 60).round()} sec"),
      //                 SvgPicture.asset("assets/icons/clock.svg"),
      //               ],
      //             ),
      //           ),
      //         ),
      //       ],
      //     );
      //   },
      // ),
    );
  }
}
